<template>
    <breadcrumb base-title="客户" title="签单客户" sub-title="子弹发薪"/>
    <div class="w-full box-border p-16px">
        <clientInfo :id="id" :company-id="companyId"/>
        <div class="flex gap-16px mg-t-20">
            <div class="flex-1 flex flex-column">
                <div class="flex-1">
                    <dataComponent @change="handleChange" v-model:dateList="dateList" :detail="detailInfo"/>
                </div>
                <div class="mg-t-16 flex-1">
                    <chartLine v-model:days="days" @update="getChartInfo" :chart-data="chartData"/>
                </div>
            </div>
            <div class="flex-1 bg-white">
                <saleRecord :detail="recordDetail"/>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, watch, onMounted,onActivated } from 'vue'
import { useRoute } from 'vue-router'
import { getSassPayCount } from '@/api/clients/signClient.ts'

import clientInfo from './components/clientInfo.vue'
import dataComponent from './components/dataComponent.vue'
import chartLine from './components/chartLine.vue'
import saleRecord from './components/saleRecord.vue'
import { getDealInfo, getSassEmployeesUnpaid, getSassGetPaySalesRecord } from '@/api/clients/signClient.ts'


const route = useRoute()

const handleChange = () => {
    console.log(111)
}

const id = ref('')
const companyId = ref('')
const dateList = ref([])
const detailInfo = ref({})

const getData = () => {
    getSassPayCount({
        companyId: companyId.value,
        startTime: ((dateList.value?.length && dateList.value[0]) ?? ''),
        endTime: ((dateList.value?.length && dateList.value[1]) ?? '') 
    }).then(res => {
        detailInfo.value = res
    })
}

const days = ref(7)
const chartData = ref({})
const getChartInfo = () => {
    getSassEmployeesUnpaid({
        companyId: companyId.value,
        days: days.value
    }).then(res => {
        chartData.value = res
    })
}

const recordDetail = ref({})
const getRecordData = () => {
    getSassGetPaySalesRecord({
        companyId: companyId.value,
    }).then(res => {
        console.log(111, res)
        recordDetail.value = res
    })
}

watch(dateList, (newval) => {
    if(companyId.value) {
        getData()
    }
}, {
    deep: true
})

onMounted(() => {
    id.value = atob(route.query.id)
    companyId.value = atob(route.query.companyId)
    getData()
    getChartInfo()
    getRecordData()
})
onActivated(() => {
    id.value = atob(route.query.id)
    companyId.value = atob(route.query.companyId)
    getData()
    getChartInfo()
    getRecordData()
})
</script>
<style lang="scss" scoped>
.container {
    padding: 16px;
}
</style>